<script setup>
import { useRouter } from 'vue-router'
import { ref, watchEffect } from 'vue'
import { Layout, Menu } from 'ant-design-vue'
import { RouterView } from 'vue-router'
import { menuConfig } from '@/menuConfig' // 引入菜单配置文件

const router = useRouter()
const selectedKey = ref([router.currentRoute.value.path])  // 默认选中当前路径
const collapsed = ref(false)
const openKeys = ref([])  // 用于控制展开的菜单项

// 递归查找目标菜单路径的父级菜单的 keys
const findParentKeys = (menuList, path) => {
  for (const item of menuList) {
    // 如果当前菜单项匹配路径，返回一个包含当前项的 key
    if (item.key === path) {
      return [item.key]
    }
    // 如果菜单项有子菜单，递归查找
    if (item.children) {
      const parentKeys = findParentKeys(item.children, path)
      // 如果在子菜单中找到了路径，返回当前菜单项的 key 和父级菜单的 key
      if (parentKeys.length > 0) {
        return [item.key, ...parentKeys]  // 返回当前菜单项的 key 和父级菜单项的 key
      }
    }
  }
  return []  // 如果没有找到匹配的路径，返回空数组
}

// 监听路由变化，更新选中的菜单项和展开的菜单项
watchEffect(() => {
  const path = router.currentRoute.value.path
  const page = router.currentRoute.value.query.page  // 获取路由中的 page 参数
  console.log(router)
  // 如果有 page 参数，则根据 page 参数查找菜单
  const targetPath = page ? page : path

  selectedKey.value = [targetPath]

  // 动态推导父级菜单
  const parentKeys = findParentKeys(menuConfig, targetPath)
  openKeys.value = parentKeys
})

// 菜单项点击事件
const select = ({ _item, _key, selectedKeys }) => {
  selectedKey.value = selectedKeys
}

const itemClick = ({ item }) => {
  if (!!item?.link) {
    router.push(item?.link)
  }
}
</script>

<template>
  <Layout class="w-[100%] min-h-[100vh]">
    <Layout.Sider style="background: #fff; min-width: 100vh;" :collapsed="collapsed">
      <Menu @click="itemClick" mode="inline" @select="select" :selectedKeys="selectedKey" :openKeys="openKeys"
        :items="menuConfig" :onOpenChange="(keys) => { openKeys.value = keys }" />
    </Layout.Sider>

    <Layout.Content class="center" style="flex: 1;">
      <RouterView /> <!-- 页面内容将显示在这里 -->
    </Layout.Content>
  </Layout>
</template>

<style lang="less">
.center {
  width: 100%;
  height: calc(100vh);
  overflow-y: auto;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
}
</style>
